<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Simple Ajax Application</title>
  <!-- (1) Load library scripts, courtesy of Yahoo! YUI. -->
  <script src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"></script>
  <script src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js" type="text/javascript"></script>
  <!-- New scripts for Ajax connectivity. -->
  <script src="http://yui.yahooapis.com/2.6.0/build/yahoo/yahoo-min.js" type="text/javascript"></script>
  <script src="http://yui.yahooapis.com/2.6.0/build/connection/connection-min.js" type="text/javascript"></script>
</head>
<body>
  <!-- (2) Render a button control. -->
  <input id="hello-button" type="button" value="Say Hello World via AJAX" />
  <br /><br />
  <!-- (3) Provide a message area. --> 
  <div id="hello-div"></div>
  <!-- (4) Initialize the button and div, define the callback and handleClick functions, and attach handleClick to the button. -->
  <script type="text/javascript">
    var elButton = new YAHOO.util.Element('hello-button');
    var elDiv = YAHOO.util.Dom.get("hello-div");
    var sUrl = "ajax-works-result.txt";
    
	<!-- (5) The callback function runs when the XHR returns. -->
    var callback = {
     success: function(o) {
        elDiv.innerHTML = o.responseText;
        alert("AJAX works! " + "Status is (" + o.status + ") " + o.statusText + "."); //SUCCESS
        },
     failure: function(o) {
        alert("AJAX doesn't work! " + "Status is (" + o.status + ") " + o.statusText + "."); //FAILURE
     }
    }

	<!-- (6) The event handler hands off to the callback method. --> 
    var handleClick = function(e) {
        var transaction = YAHOO.util.Connect.asyncRequest("GET", sUrl, callback, null);
        this.removeListener(handleClick);
    };
    elButton.on('click', handleClick, elButton);

    </script>
  </body>
</html>
